<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="加油站" :total="stationCount">
           <a-icon style="font-size: 50px;color:burlywood" type="info-circle-o" />
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="月总金额" :total="feesCount"> 
          <a-icon  style="font-size: 50px;color:hotpink" type="pic-right" />
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="月总油量" :total="oilCount">  
           <a-icon  style="font-size: 50px;color:cornflowerblue" type="sort-descending" />        
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="月加油次数" :total="tradCount"> 
           <a-icon  style="font-size: 50px;color:burlywood" type="snippets" />         
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        
           <a-button href="/dtu/list" class="ant-btn ant-btn-primary" style="width:45%;height:70px;margin: 5px;">所有网关<br>{{alldevice}}</a-button>
           <a-button href="/dtu/listonline" class="ant-btn ant-btn-primary" style="width:45%;height:70px;margin: 5px;background-color:#c5c53f;border-color:#c5c53f">在线设备<br>{{online}}</a-button>
           <a-button href="/dtu/listoffline" class="ant-btn ant-btn-primary" style="width:45%;height:70px;margin: 5px;background-color:orange;border-color:orange">离线设备<br>{{offline}}</a-button>
           <a-button href="/alarm/list" class="ant-btn ant-btn-primary" style="width:45%;height:70px;margin: 5px;background-color:#f98398;border-color:#f98398">异常数据<br>{{excepttiondevice}}</a-button>
      </a-col>
    </a-row>

    
    <a-row>
              <a-col :xl="14" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="月销售统计" :dataSource="barData"/>
              </a-col>
              <a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="实时销售数据" :list="rankList"/>
              </a-col>
    </a-row>

    <a-row :gutter="32">
      <a-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
           <pie-chart :pie="pie1"/>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :pie="pie2" />
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :pie="pie3" />
        </div>
      </a-col>
    </a-row>

  
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import BarChart from './components/BarChart'
  import live from './components/live.vue'
  import PieChart from './components/PieChart'
  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'

const rankList = []
  
  const barData = []
  
  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo,
      BarChart,
      live,
      PieChart
    },
    data() {
      return {
        loading: true,
        center: null,
        rankList,
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,        
        stationCount:1,
        feesCount:2,
        oilCount:3,
        tradCount:5,
        alldevice:0,
        online:0,
        offline:0,
        excepttiondevice:1,
        pie1:{
            className:"石化能源占比",
            data:[
                    {value: 70, name: '汽油'},
                    {value: 30, name: '柴油'},
                ]
          },
          pie2:{
            className:"汽油销售占比",
            data:[
                    {value: 70, name: '92#'},
                    {value: 30, name: '95#'},
                ]
          },
          pie3:{
            className:"柴油销售占比",
            data:[
                    {value: 60, name: '0#'},
                    {value: 40, name: '-10#'},
                ]
          }        
       }
    },
    mounted(){ 
               
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
        this.yaochuan="very cool"
      }, 1000);
      setTimeout(() => {
        window.resizeTo(1200,900);
      }, 3000)
      this.initLogInfo();  
      this.getData(); 
      this.getRankData();
      setInterval(() => {
        this.getRankData();
      }, 15000);    
    },
    methods: {
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
      getData(){
        this.$http.get('/welcome/data')
          .then(res => {
            window.console.log(res.result.feesCount+res.result.stationCount);
            this.stationCount=res.result.stationCount+"座";
            this.feesCount=(res.result.feesCount/10000).toFixed(0)+"万元";
            this.oilCount=(res.result.oilCount/10000).toFixed(2)+"万升";
            this.tradCount=res.result.tradCount+"笔";
            this.alldevice=res.result.alldevice;
            this.online=res.result.online;
            this.offline=res.result.offline;
            this.excepttiondevice=res.result.excepttiondevice;
            if(this.offline!=0){
              this.$notification[ 'error' ]({
              message: '设备离线',
              description: '离线数量'+this.offline,
              duration: 20,
            });
            }
           
          })

         
          this.$http.get('/welcome/monthdata')
          .then(res => {
            window.console.log(res);
            let data = []
            for (let i = 0; i < 12; i += 1) {
                data.push({
                  x: `${i + 1}月`,
                  y: (res.result[i]/10000)
                })
              }
              this.barData=data;

              
          })
          
          

          
      },
      getRankData(){
        this.$http.get('/welcome/top7trad')
          .then(res => {
            rankList.splice(0,rankList.length);
            for (let i = 0; i < 7; i += 1) {
                 rankList.push({
                    name: res.result[i].stationName,
                    time: res.result[i].createTime,
                    total: res.result[i].totalPrice
                  })
              }
              
          })

      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  @media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>